<template>
    <div>{{ title }}</div>
    <button @click="openConfirmModal">openConfirmModal</button>
    <button @click="openDefaultModal">openDefaultModal</button>

    <!-- Vue3改变 -->
    <!-- visible 在model组件中,v-model对应的就是visible -->
    <modal v-model:visible="modalVisible" title="信息提示" content="打开了一个弹框" @handleConfirm="handleConfirm">
        <form>
            <label>姓名:</label>
            <input v-model="name" placeholder="请输入姓名" />

            <label>年龄:</label>
            <input v-model="age" placeholder="请输入年龄" />
        </form>
    </modal>
</template>
<script setup>
import { ref, provide } from 'vue';

let title = ref('这是home页面')
let modalVisible = ref(false)

// 获取弹框类型
let modelType = ref('default')

// provide有两个参数，第一个是我们传递的key，第二个就是value了
provide('modelType', modelType)

// 操作弹框
const openConfirmModal = () => {
    modelType.value = 'confirm'
    modalVisible.value = true
}

// 操作弹框
const openDefaultModal = () => {
    modelType.value = 'default'
    modalVisible.value = true
}

const handleConfirm = () => {
    modalVisible.value = false
    console.log('do somethings')
}

/**
 * form 部分
 */

let name = ref('')
let age = ref(null)

</script>
<style>
</style>